<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<!-- 内部样式 -->
		<style type="text/css">
			*{	   /* *:通配符,指所有的标签.初始化所有标签的内边距和外边距 */
				margin: 0;
				padding: 0;
			}
			.box{
				width:300px;	/* 盒子的宽 */
				height:450px;	/* 盒子的高 */
				/* border-width:10px;
				border-color:#008000;
				border-style:solid */
				/* 复合写法border:大小 样式 颜色;(顺序不论) */
				/* solid实线,dotted点线,dashed虚线*/
				border:1px solid red;
				/* border-top,bottom,left,right */
				/* padding:50px 40px 30px 20px; */ /* 分别对应:上 右 下 左 顺时针方向 */
				padding:50px 30px 10px;	/* 分别对应:上 左右 下 */
				/* padding:50px 20px;分别对应: 上下 左右*/
				/* padding:50px;		四个方位都是50px */
				/* margin-top: 50px;
				margin-bottom:50px ;
				margin-left: 100px; */
				margin: 50px;
			}
			.box2{
				width: 200px;
				height: 200px;
				border: 1px solid green;
				margin: 10px auto;		/* 盒子水平居中 */
				}
			</style>
		<!-- <link href="css/boxstyle.css"rel="stylesheet"/> -->
	</head>
	<body>
		<!-- 盒子模型：内容content,内边距padding,边框border,外边距margin-->
		<!-- 方位词：top上，bottom下，right右，left左，center居中 -->
		<!-- 内边距padding：会把盒子撑大 -->
		<!-- 外边距margin：盒子与盒子之间的距离 -->
		<!-- 
		外边距的应用：
		1.可以让块级盒子水平居中 >第一盒子要有宽度；第二给盒子盒子左右外边距设置为auto(自动的)
		2.初始化所有标签的内、外边距
		-->
		<div class="box">hello box！</div>
		<div class="box2">hello box!</div>
	</body>
</html>
